<template>
  <lb-layout
    v-loading="$store.getters.loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="#a19f9fb0;"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>
    <div>
      <Title :name="componentsName[0]" :line="false">
        <com-wt
          :radarData="radarData"
          :pieData="pieData"
          :statusList="statusList"
          :total="total"
          height="260"
        />
      </Title>
      <Title :name="componentsName[1]" :line="false" class="mt20">
        <div slot="tips">
          <span style="margin-right: 10px">单位:</span>
          <span style="color: rgb(247, 122, 5)"> 条 </span>
        </div>
        <com-wo :barData="barData" />
      </Title>
    </div>
  </lb-layout>
</template>

<script>
import {
  instructObjectStatistic,
  instructTypeStatistic,
} from "@/api/forewarning/statistic";
import comWt from "@/views/statistics/forewarning/statistic/components/waringType.vue";
import comWo from "@/views/statistics/forewarning/statistic/components/waringObj.vue";
export default {
  name: "alarmCommand",
  components: {
    comWt,
    comWo,
  },
  dicts: ["waring_shape", "waring_level"],
  data() {
    return {
      componentsName: ["预警类型分析", "预警数TOP10"],
      // 查询表
      apsForm: {
        formRef: "form",
        labelWidth: "auto",
        formData: {},
        formConfig: {
          formAttr: {
            inline: true,
            size: "small",
          },
          properties: {
            date: {
              label:"日期:",
              typeName: "el-date-picker",
              type: "daterange",
              "start-placeholder": "请选择开始日期",
              "end-placeholder": "请选择结束日期",
              "value-format": "yyyy-MM-dd",
            },
          },
          formSoltButton: [
            {
              label: "搜索",
              type: "primary",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-search",
              click: this.handlerSearchDetail,
            },
            {
              label: "重置",
              type: "",
              typeName: "el-button",
              size: "small",
              icon: "el-icon-refresh-left",
              click: this.handleReset,
            },
          ],
        },
      },
      // 报警类型分析数据
      total: 0,
      radarData: [], // 雷达图数据
      pieData: [], // 饼图数据
      barData: [], // 柱状图数据
      statusList: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    // 请求数据
    async initData() {
      let that = this;
      const [startTime, endTime] =
        this.$refs?.form?.getFieldsValue().date || [];
      const data = {
        endTime,
        startTime,
        limit: 10,
      };
      this.$store.commit("app/updateApiCount", "add");
      await instructObjectStatistic(data)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.barData = res?.data ?? [];
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");

          // this.$message.error("系统错误,请联系管理员!300601");
        });
      await instructTypeStatistic(data)
        .then((res) => {
          this.$store.commit("app/updateApiCount");
          if (res.code === 700) {
            that.$message.warning(res.msg);
            return false;
          }
          this.radarData = res?.data?.typeList ?? [];
          this.pieData = res?.data?.levelList ?? [];
          this.statusList = res?.data?.statusList ?? [];
          this.total = res?.data?.total ?? 0;
        })
        .catch((err) => {
          this.$store.commit("app/updateApiCount");
          // this.$message.error("系统错误,请联系管理员!300602");
        });
    },
    // 搜索
    handlerSearchDetail() {
      this.initData();
    },
    //重置
    handleReset() {
      this.$refs?.form?.resetFields();
      this.handlerSearchDetail();
    },
  },
};
</script>

<style scoped lang="scss">
.mb {
  margin-bottom: 5px;
}
::v-deep .el-card__body {
  padding-bottom: 0px;
}
</style>
